<template>
  <div class="init-container">
    <o-modal
      v-model="isShow"
      :title="modelCf.title + $srv.getI18nBySrv('file')"
      :size="modelCf.size"
      :mask="modelCf.mask"
      :tap-close="modelCf.tapClose"
      :show-footer="modelCf.showFooter"
      @on-ok="confirm"
      @on-close="close"
    >
      <div slot="content" class="progress-container clearfix">
        <o-progress :config="config.config"></o-progress>
      </div>
    </o-modal>
  </div>
</template>

<script lang="ts">
import oProgress from '@/components/base/modal/o-progress-bar/o-progress.vue';
import oModal from '../o-modal/index.vue';
import { I_cmd, N_oProgressBar, T_cmd, T_srv, Tsrv, ifs, vue } from './config';

@T_srv.comp({
  components: {
    oModal,
    oProgress
  }
})
export default class oProgressBar extends vue {
  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  @T_srv.prop({
    required: true
  })
  readonly config: N_oProgressBar.I_config;

  @T_srv.prop({
    required: true,
    type: Number
  })
  id: number;

  @T_srv.watch('config.config.percentage')
  private onPercentageChange() {
    if (this.config.config.percentage >= 100) {
      if (this.autoClose) {
        this.close();
      }
    }
  }

  /* 组件名 */
  private name: string = 'oProgressBar';

  private funName: string = '';

  private G_compName: string = this.name;

  /* 组件箱信息对象 */
  private GT_compBoxInfo: ifs.I_compBoxInfo;

  /* 组件箱对象 */
  private GT_compBox: ifs.I_compBox;

  /* 组件箱识别ID */
  private G_compID: string;

  /* 指挥部 */
  private GT_command: I_cmd = new T_cmd();

  private isShow: boolean = false;

  private showDetails = false;

  private autoClose: boolean = true;

  private modelCf: N_oProgressBar.I_modelCf = new N_oProgressBar.T_modelCf();

  get progressColor(): string {
    if (this.config.config.percentage >= 100) return '#19be6b';
    if (this.config.config.percentage >= 75) return '#2d8cf0';
    if (this.config.config.percentage >= 50) return '#ff9900';
    return '#ed4014';
  }

  get progressStatus(): string {
    if (this.config.config.percentage >= 100) return 'success';
    if (this.config.config.percentage <= 0) return 'wrong';
    return 'active';
  }

  created() {
    // 如果父组件没有传参，那就产生一个
    this.GT_compBoxInfo = Tsrv.getCompInfo(this.compBoxInfo);
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_command.init(this, this.GT_compBoxInfo);
    this.show();
    if (this.autoClose && this.config.config.percentage >= 100) {
      this.close();
    }
    this.init();
  }

  mounted() {
    /* 向父组件发送实例 */
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 最终应用组件销毁 */
    /* this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName,'funName'); */

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
  }

  private init() {
    // 读取配置
    const autoClose = this.config?.autoClose;
    if (!Tsrv.utils.noValue(autoClose) && typeof autoClose === 'boolean') {
      this.autoClose = autoClose;
    }
    // modal配置
    const modelCf = this.config.modelCf;
    if (!Tsrv.noValue(modelCf?.title)) {
      this.modelCf.title = modelCf.title;
    }
    if (!Tsrv.noValue(modelCf?.size)) {
      this.modelCf.size = modelCf.size;
    }
    if (!Tsrv.noValue(modelCf?.mask)) {
      this.modelCf.mask = modelCf.mask;
    }
    if (!Tsrv.noValue(modelCf?.showFooter)) {
      this.modelCf.showFooter = modelCf.showFooter;
    }
    if (!Tsrv.noValue(modelCf?.tapClose)) {
      this.modelCf.tapClose = modelCf.tapClose;
    }
  }

  public show() {
    this.isShow = true;
  }

  public hide() {
    this.isShow = false;
  }

  public confirm() {
    this.$bus.$emit(`modal_${this.id}`, true);
    this.hide();
  }

  public close() {
    this.$bus.$emit(`modal_${this.id}`, false);
    this.hide();
  }
}
</script>
<style lang="scss" scoped>
.progress-container {
  width: 100%;
  padding: 16px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e8eaec;
}
</style>
